<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" manifest="{% static 'manifest.appcache' %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>CJLR 2nd EOC Off-site Meeting</title>
    <link rel="stylesheet" href={% static "/css/base.css" %}>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        body {
            overflow: hidden;
        }

        .index {
            height: 100%;
            background: url({% static "img/bg.png" %}) no-repeat;
            background-size: cover;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            box-sizing: border-box;
        }

        .topHold {
            height: 70px;
        }

        .logoBox {
            width: 100%;
            height: 53px;
            position: relative;
        }

        .logo {
            width: 150px;
            height: 53px;
            position: absolute;
            right: 33px;
            top: 15px;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .bigTitle {
            margin-bottom: 6px;
        }

        .bigTitle .tit {
            font-size: 21px;
            color: #231916;
            font-weight: bold;
        }

        .bigTitle .smTit {
            font-size: 11px;
            color: #231916;
        }

        .content {
            width: 250px;
            margin-left: 21px;
        }

        .content img {
            width: 100%;
        }

        .title {
            width: 188px;
            height: 48px;
            margin-left: 104px;
            margin-bottom: 7px;
        }

        .title img {
            width: 100%;
        }

        .goBox {
            width: 326px;
            height: 153px;
            margin: 0 auto;
            margin-bottom: 8px;
            position: relative;
        }

        .mainBox {
            width: 326px;
            height: 153px;
            background: url({% static "img/dhbd2.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
        }

        .con {
            width: 224px;
            height: 60px;
            margin: 0 auto;
            margin-bottom: 15px;
        }

        .con img {
            width: 100%;
        }

        .btm {
            width: 90%;
            height: 47px;
            margin: 0 auto;
        }

        .btm img {
            width: 100%;
        }

        .hide {
            width: 25px;
            height: 25px;
            position: absolute;
            background: url({% static "img/hide.png" %}) no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
        }

        .hideLt {
            left: 0;
            bottom: 0;
        }

        .hideRt {
            right: 0;
            top: 0;
            transform: rotateZ(180deg);
        }

        .showClick {
            width: 70%;
            height: 50px;
            position: absolute;
            top: 65%;
            left: 50%;
            margin-left: -35%;
        }

        .showClick img {
            width: 100%;
            height: 100%;
        }

        .showClickFinger {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            left: 50%;
            margin-left: -25px;
        }

        .showClickFinger img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="index">
    <div class="topHold"></div>
    <div class="bigTitle">
        <div class="content animated fadeInLeft">
            <img src={% static "img/tt.png" %} alt="">
            <!--<div class="tit">2018经管会第二次场外会议</div>-->
            <!--<div class="tit">2018 2<sup style="font-size: 14px;">nd</sup> EOC OFFSITE METTING</div>-->
            <!--<div class="hold"></div>-->
            <!--<div class="smTit">上海 SHANGHAI</div>-->
            <!--<div class="smTit">7<sup>TH</sup> Jun.2018</div>-->
        </div>
    </div>
    <div class="go">
        <div class="title animated zoomIn">
            <img src={% static "img/ftit.png" %} alt="">
        </div>
        <div class="goBox animated zoomIn">
            <a href="{% url 'index_app:go' %}">
                <div class="mainBox" id="container"></div>
            </a>
            <div class="showClick animated ">
                <img src={% static "img/click.png" %} alt="">
            </div>
            <div class="showClickFinger animated ">
                <img src="" alt="">
            </div>
        </div>
        <div class="con animated fadeInUp">
            <img src={% static "img/fbtm2.png" %} alt="">
        </div>
        <div class="btm animated fadeInUp">
            <img src={% static "img/fbtm.png" %} alt="">
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        setTimeout(function () {
            $('.showClick').addClass('flash')
        }, 500)
        setTimeout(function () {
            $('.showClickFinger').addClass('flash')
        }, 1000)
        setTimeout(function () {
            $('.showClickFinger').addClass('fadeOut')
        }, 2000)
    })
</script>
</html>